<template>
  <n-card :bordered="false" class="proCard">
    <n-grid cols="1" responsive="screen">
      <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
        <n-form
          :label-width="120"
          :model="formValue"
          :rules="rules"
          label-placement="top"
          ref="formRef"
          class="py-8"
        >
          <n-grid :cols="24" :x-gap="24">
            <n-grid-item :span="12">
              <n-form-item label="壳包名称:" path="appName">
                <n-input v-model:value="formValue.appName" clearable placeholder="请输入壳包名称"/>
              </n-form-item>
              <n-form-item label="渠道标识" path="chanId">
                <n-select v-model:value="formValue.chanId" :options="chanOptions" clearable placeholder="请选择渠道标识"/>
              </n-form-item>
              <n-form-item label="壳包下载地址:" path="downUrl">
                <n-input v-model:value="formValue.downUrl" clearable placeholder="请输入游戏地址连接"/>
              </n-form-item>
              <n-form-item label="壳包描述:" path="appDesc">
                <n-input v-model:value="formValue.appDesc" type="textarea" clearable placeholder="请输入游戏描述"/>
              </n-form-item>
            </n-grid-item>
            <n-grid-item :span="12">
              <n-grid :cols="12" :x-gap="12">
                <n-gi :span="6">
                  <n-form-item label="红包状态" path="redStatus">
                    <n-radio-group
                      v-model:value="formValue.redStatus"
                      name="left-size"
                      style="margin-bottom: 12px"
                    >
                      <n-radio-button value="disable">
                        关闭
                      </n-radio-button>
                      <n-radio-button value="able">
                        开启
                      </n-radio-button>
                    </n-radio-group>
                  </n-form-item>
                  <n-form-item label="是否打包" path="isPack">
                    <n-radio-group
                      v-model:value="formValue.isPack"
                      name="left-size"
                      style="margin-bottom: 12px"
                    >
                      <n-radio-button value="disable">
                        否
                      </n-radio-button>
                      <n-radio-button value="able">
                        是
                      </n-radio-button>
                    </n-radio-group>
                  </n-form-item>
                </n-gi>
                <n-gi :span="6">
                  <n-form-item label="壳包类型" path="appType">
                    <n-radio-group
                      v-model:value="formValue.appType"
                      name="left-size"
                      style="margin-bottom: 12px"
                    >
                      <n-radio-button value="andriod">
                        安卓
                      </n-radio-button>
                      <n-radio-button value="ios">
                        ios
                      </n-radio-button>
                    </n-radio-group>
                  </n-form-item>
                  <n-form-item label="壳包状态" path="appStatus">
                    <n-radio-group
                      v-model:value="formValue.appStatus"
                      name="left-size"
                      style="margin-bottom: 12px"
                    >
                      <n-radio-button value="spread">
                        过审中
                      </n-radio-button>
                      <n-radio-button value="trial">
                        推广中
                      </n-radio-button>
                    </n-radio-group>
                  </n-form-item>
                </n-gi>
              </n-grid>
              <n-form-item label="壳包打包图标:" clearable path="appIcon">
                <BasicUpload
                  :action="`/api/system/oss/upload`"
                  :headers="uploadHeaders"
                  name="files"
                  :width="100"
                  :height="100"
                  :maxNumber=1
                  @uploadChange="uploadAppIconChange"
                  v-model:value="appIconList"
                />
              </n-form-item>
            </n-grid-item>
          </n-grid>
          <n-grid :cols="12">
            <n-grid-item :space="1" :offset="9">
              <n-button type="primary" @click="formSubmit">提交</n-button>
            </n-grid-item>
            <n-grid-item :space="1">
              <n-button @click="resetForm" style="margin-left: 20px;">重置</n-button>
            </n-grid-item>
          </n-grid>
        </n-form>
      </n-grid-item>
    </n-grid>
  </n-card>
</template>

<script lang="ts">
  import {computed, h, defineComponent, onMounted, onActivated, reactive, ref, unref} from 'vue';
  import {useDialog, useMessage} from 'naive-ui';
  import {PlusOutlined} from '@vicons/antd';
  import {useRouter} from 'vue-router';
  import {useGlobSetting} from "@/hooks/setting";
  import {GameModel} from "@/api/game/game";
  import {useUserStoreWidthOut} from "@/store/modules/user";
  import {getChanList} from "@/api/game/chan";
  import {Subpackage} from "@/api/game/subpackage";


  export default defineComponent({

    props: {
      defaultValue: Object,
      default: {}
    },

    emits: ["submit"],

    setup(props, {emit}) {
      const formRef: any = ref(null);
      const message = useMessage();
      const chanOptions = ref([]);

      //游戏预览图列表
      const appIconList = ref<string[]>([]);

      const formValue = ref({});

      const dialog = useDialog();
      const userStore = useUserStoreWidthOut();

      const uploadHeaders = {
        Authorization: userStore.getToken
      };

      const rules = {
        appName: {
          required: true,
          message: '请输入壳包名称',
          trigger: 'blur',
        },
        chanId: {
          required: true,
          message: '请选择渠道标识',
          trigger: 'blur',
        },
        appIcon: {
          required: true,
          message: '必须上传打包图标',
          trigger: 'blur',
          validator: () => {
            return unref(appIconList).length > 0
          }
        },
        redStatus: {
          required: true,
          message: '请选择红包状态',
          trigger: 'blur',
        },
        isPack: {
          required: true,
          message: '是否打包',
          trigger: 'blur',
        },
        appType: {
          required: true,
          message: '壳包类型',
          trigger: 'blur',
        },
        appStatus: {
          required: true,
          message: '壳包状态',
          trigger: 'blur',
        }
      };


      function uploadAppIconChange(files: any[]) {
        appIconList.value = unref(files)
      }

      function formSubmit() {
        formRef.value.validate((errors) => {
          if (!errors) {
            let appIcon = unref(appIconList).length > 0 ? unref(appIconList).join(",") : "";
            let value = Object.assign({}, unref(formValue), {appIcon}) as GameModel;
            emit("submit", value)
          } else {
            message.error('验证失败，请填写完整信息');
          }
        });

      }

      function resetForm() {

        dialog.warning({
          title: '警告',
          content: `重置将清空当前设置，是否重置？`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            console.log(unref(props).defaultValue);
            formValue.value = Object.assign({}, unref(props).defaultValue);
            //赋值图片列表
            let subPackage = unref(formValue) as Subpackage;
            if (subPackage.appIcon) {
              appIconList.value = subPackage.appIcon.split(",")
            }
          },
          onNegativeClick: () => {
          },
        });
      }

      onMounted(async () => {
        console.log(unref(props).defaultValue);
        formValue.value = Object.assign({}, unref(props).defaultValue);
        //赋值图片列表
        let subpackage = unref(formValue) as Subpackage;
        if (subpackage.appIcon) {
          appIconList.value = subpackage.appIcon.split(",")
        }
        await loadChanOptions()

      });

      async function loadChanOptions() {
        let chanAll = await getChanList();
        chanOptions.value = chanAll.map((item: any) => {
          return {value: item.chanId, label: item.chanName}
        })
      }

      return {
        formValue,
        appIconList,
        formSubmit,
        uploadAppIconChange,
        resetForm,
        uploadHeaders,
        rules,
        formRef,
        chanOptions
      }
    }
  })
</script>

<style lang="less" scoped></style>
